<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3.Vue监测数组改变的原理</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            Vue如何监测数组改变?
            通过包裹数组的变更方法实现,本质就是做了两件事:
            (1)调用原生对应的方法对数组进行更新.
            (2)重新解析模板.进而更新页面,
            备注:在Vue的世界,修改数组一定要用如下方法:
            push(),pop(),shift(),unshift(),splice(),sort(),reverse()
         -->
        <!-- 准备好一个容器-->
        <div id="demo">
            <h1>人员信息</h1>
            <ul>
                <li>姓名:{{name}}</li>
                <li>年龄:{{age}}</li>
                <li>爱好:{{hobby}}</li>
            </ul>
            <button @click ="changeName">改名字</button>
            <button @click ="changeAge">改年龄</button>
            <button @click ="changeFirstHobby">改第一个爱好</button>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#demo',
            data:{
                name:'Tom',
                age:18,
                hobby:['抽烟','喝酒','烫头'],
            },
            methods: {
                changeName(){
                    this.name ='托尼'
                },
                changeAge(){
                    this.age =20
                },
                changeFirstHobby(){
                    this.hobby.splice(0,1,'学习')
                }
            },
        })
    </script>
</html>